<template>
  <!-- 文件预览对话框 -->
  <el-dialog
    v-model="previewDialogVisible"
    :title="selectedFile?.name || '文件预览'"
    :width="isMobile ? '95%' : '80%'"
    destroy-on-close
    top="5vh"
  >
    <div class="preview-dialog-content" v-if="selectedFile">
      <DocumentViewer
        :document-url="selectedFile.url"
        :document-name="selectedFile.name"
        :document-type="getDocumentType(selectedFile)"
      />
    </div>
  </el-dialog>
  
  <!-- 文件信息对话框 -->
  <el-dialog
    v-model="fileInfoDialogVisible"
    title="文件信息"
    :width="isMobile ? '95%' : '500px'"
    destroy-on-close
  >
    <div class="file-info-content" v-if="selectedFile">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="文件名">{{ selectedFile.name }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{ getFileTypeLabel(selectedFile.type) }}</el-descriptions-item>
        <el-descriptions-item label="大小">{{ selectedFile.size }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ selectedFile.updateTime }}</el-descriptions-item>
        <el-descriptions-item label="分类" v-if="selectedFile.category">{{ selectedFile.category }}</el-descriptions-item>
        <el-descriptions-item label="路径" v-if="selectedFile.key">{{ selectedFile.key }}</el-descriptions-item>
      </el-descriptions>
      
      <div class="file-info-actions">
        <el-button 
          v-if="selectedFile.type !== 'directory' && isDocumentFile(selectedFile)"
          type="primary" 
          @click="$emit('open-file-in-reader', selectedFile); fileInfoDialogVisible = false"
        >
          在阅读器中打开
        </el-button>
        
        <el-button 
          v-if="selectedFile.type !== 'directory'"
          type="success" 
          @click="$emit('download-file', selectedFile)"
        >
          下载文件
        </el-button>
      </div>
    </div>
  </el-dialog>
  
  <!-- 创建文件夹对话框 -->
  <el-dialog
    v-model="createFolderDialogVisible"
    title="新建文件夹"
    :width="isMobile ? '95%' : '400px'"
    destroy-on-close
  >
    <el-form :model="folderForm" label-width="80px">
      <el-form-item label="文件夹名">
        <el-input v-model="folderForm.name" placeholder="请输入文件夹名称" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="createFolderDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="$emit('create-folder')" :loading="creatingFolder">
          创建
        </el-button>
      </span>
    </template>
  </el-dialog>
  
  <!-- 上传文件对话框 -->
  <el-dialog
    v-model="uploadDialogVisible"
    title="上传文件"
    :width="isMobile ? '95%' : '500px'"
    destroy-on-close
  >
    <el-upload
      class="upload-area"
      drag
      action="#"
      :auto-upload="false"
      :on-change="(file, fileList) => $emit('handle-file-change', file, fileList)"
      :file-list="uploadFiles"
      multiple
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        拖拽文件到此处或 <em>点击上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          上传到当前目录: {{ currentPath || '根目录' }}
        </div>
      </template>
    </el-upload>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="uploadDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="$emit('upload-selected-files')" :loading="uploading" :disabled="!uploadFiles.length">
          上传
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue';
import { UploadFilled } from '@element-plus/icons-vue';
import DocumentViewer from '../common/DocumentViewer.vue';

const props = defineProps({
  // 对话框可见性
  previewDialogVisible: Boolean,
  fileInfoDialogVisible: Boolean,
  createFolderDialogVisible: Boolean,
  uploadDialogVisible: Boolean,
  
  // 数据
  selectedFile: Object,
  folderForm: Object,
  uploadFiles: Array,
  
  // 状态
  uploading: Boolean,
  creatingFolder: Boolean,
  isMobile: Boolean,
  currentPath: String,
  
  // 辅助函数
  isDocumentFile: Function,
  getDocumentType: Function,
  getFileTypeLabel: Function
});

const emit = defineEmits([
  'update:previewDialogVisible',
  'update:fileInfoDialogVisible',
  'update:createFolderDialogVisible',
  'update:uploadDialogVisible',
  'handle-file-change',
  'upload-selected-files',
  'create-folder',
  'open-file-in-reader',
  'download-file'
]);

// 双向绑定对话框可见性
const previewDialogVisible = computed({
  get: () => props.previewDialogVisible,
  set: (value) => emit('update:previewDialogVisible', value)
});

const fileInfoDialogVisible = computed({
  get: () => props.fileInfoDialogVisible,
  set: (value) => emit('update:fileInfoDialogVisible', value)
});

const createFolderDialogVisible = computed({
  get: () => props.createFolderDialogVisible,
  set: (value) => emit('update:createFolderDialogVisible', value)
});

const uploadDialogVisible = computed({
  get: () => props.uploadDialogVisible,
  set: (value) => emit('update:uploadDialogVisible', value)
});
</script>

<style scoped>
/* 预览对话框 */
.preview-dialog-content {
  height: 75vh;
}

.preview-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.dialog-title {
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}

.dialog-actions {
  display: flex;
  gap: 8px;
}

:deep(.preview-dialog .el-dialog__header) {
  margin-right: 0;
  padding: 15px 0;
}

:deep(.preview-dialog .el-dialog__headerbtn) {
  display: none;
}

:deep(.preview-dialog .el-dialog__body) {
  padding: 0;
}

/* 文件信息对话框 */
.file-info-content {
  padding: 8px;
}

.file-info-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 上传区域 */
.upload-area {
  width: 100%;
}
</style> 